<template>
  <router-layout>
    <div class="voteDetail">
      <!-- <TitleItem v-if="this.wx==true"></TitleItem> -->
      <div class="header">
        <div class="title">
          <div class="title-text">
            <p>{{ datainfo.vote_title }}</p>
          </div>
          <div class="classify">
            <p v-if="datainfo.select_method==1">【单选题】</p>
            <p v-if="datainfo.select_method==2">【多选题】</p>
          </div>
        </div>
        <div class="content">
          <p>{{ datainfo.vote_desc }}</p>
        </div>
      </div>
      <div class="select">
        <div v-if="datainfo.isvote==0">
          <div :class="{active: navname == item?item.isShow=true:item.isShow=false}"
            class="selectList select-box" v-for="(item, index) in weekList" :key="index" @click="selctone(item)">
            <p>{{ item.option_details }}</p>
            <span style="color:#01A0EF" v-if="item.isShow" class="iconfont icon-passed_myaccountpa"></span>
          </div>
        </div>
        <div v-if="datainfo.isvote==1">
          <div class="selectList progress-box" v-for="(item, index) in weekList" :key="index">
            <div class="progress-text">
              <span>{{ item.option_details }}</span>
              <span>{{ item.scale }}</span>
            </div>
            <div class="progress" :style="{ width:item.scale }"></div>
          </div>
        </div>
      </div>
      <div class="base" v-if="datainfo.isvote==0">
        <div class="base-btn" @click="apply">
          <p>投票</p>
        </div>
      </div>
    </div>
  </router-layout>
</template>
<script>
import { vote_findById, vote_addBrowseNum } from "@/api/vote";
import { voteRecord_save } from "@/api/voteRecord";
import TitleItem from "../../components/public/title/title";
export default {
  name: "VoteTypeOne",
  components: { TitleItem },
  data() {
    return {
      weekList: [],
      navname: "",
      datainfo: {},
      listQuery: {}
    };
  },
  methods: {
    selctone(item) {
      let user = JSON.parse(localStorage.getItem("user"));
      this.navname = item;
      this.listQuery = {
        vote_id: item.vote_id,
        vote_optionid: item.id,
        user_id: user.id,
        company_id: localStorage.getItem("companyId") - 0
      };
    },
    //获取数据
    async initList() {
      let query = Object.assign(
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await vote_findById(query);
      let result = res.data;
      if (result.status == 100) {
        this.datainfo = result.data;
        this.weekList = result.data.voteOptions;
      }
    },
    async oneBrowse() {
      //增加一次浏览
      let query = Object.assign(
        { id: this.$route.query.id },
        { company_id: localStorage.getItem("companyId") - 0 }
      );
      let res = await vote_addBrowseNum(query);
      let result = res.data;
      if (result.status == 100) {
      } else {
      }
    },
    apply() {
      if (!this.navname) {
        this.$toast("投票选项不能为空");
        return;
      }
      this.$dialog
        .confirm({
          message: "只能投票一次,您确定要投票吗?"
        })
        .then(() => {
          this.saveObj();
        })
        .catch(() => {});
    },
    async saveObj() {
      let query = Object.assign(this.listQuery);
      let res = await voteRecord_save(query);
      let result = res.data;
      if (result.status == 100) {
        this.$toast.success("投票成功");
        this.navname = "";
        setTimeout(() => {
          this.initList();
        }, 500);
      } else {
        this.$toast("result.msg");
      }
    }
  },
  created() {
    this.initList();
    this.oneBrowse();
  }
};
</script>
<style lang="scss" scoped>
@import "VoteTypeOne";
</style>
